<template>
  <view class="trade">
    <view class="trade__tip"> 更新于：{{ date }}</view>
    <!-- 头部 -->
    <view class="trade__head">
      <view>
        <u-image
          class="trade__money-icon"
          width="30rpx"
          height="30rpx"
          mode="heightFix"
          src="@/static/image/home/img_trade_change.png"
        ></u-image>
        总交易(元)
      </view>
      <view class="trade__money">{{ transAmount }}</view>
    </view>
    <!-- 内容 -->
    <view class="flex trade__content">
      <!-- 左边导航 -->
      <view class="trade__left-tab">
        <view
          class="trade__tab-item flex"
          v-for="(item, index) in agentLists"
          :key="index"
          @click="changeTab(index)"
        >
          <view class="trade__tab-item__text">
            {{ item.userName }}
          </view>
          <u-icon
            name="arrow-down-fill"
            color="#9D60FF"
            v-show="agentSelect == index"
          ></u-icon>
        </view>
      </view>
      <!-- 右边内容 -->
      <view class="trade__right-content">
        <u-collapse :accordion="false" ref="collapse">
          <u-collapse-item
            v-for="(item, index) in monthTransList"
            :key="index"
            @change="itemChange(index)"
          >
            <view class="flex-2 flex" slot="title">
              <view class="flex-2">
                {{ item.transDate }}
              </view>
              <view class="flex-1"> ￥{{ item.transAmount }} </view>
            </view>
            <view
              class="flex justify-between u-margin-top-20 u-margin-bottom-20"
              v-for="(item, index) in item.list"
              :key="index"
              id="myCollapse"
              @click="goDetail(item.transDate)"
            >
              <view class="u-border-bottom u-padding-bottom-20">
                {{ item.transDate }}
              </view>
              <view class=""> ￥{{ item.transAmount }} </view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      date: '',
      params: {
        agentNo: '',
      },
      transAmount: '',
      agentParams: {
        agentNo: '', //代理商编号
        transMonth: '', //月份详情列表参数
      },
      agentSelect: 0,
      monthTransList: [], //右侧月份列表数据
      monthExpandTransList: [],
      pageNo: 1,
      pageSize: '30',
      agentParam: {},
      agentLists: [], //总交易
    };
  },
  onLoad() {
    this.date = this.traversalTime(new Date().getTime());
    this.transStat(); //总交易
    this.transStatByDate(-1, 0);
    this.agentList();
  },
  methods: {
    goDetail(transDate) {
      if (this.agentSelect > 0) {
        this.$u.route('pages/main/trade/tradeQueryList', {
          agentNo:
            this.agentSelect == 1
              ? uni.getStorageSync('agentNo')
              : this.agentLists[this.agentSelect].agentNo,
          date: transDate,
        });
      }
    },
    // 左边代理商列表
    agentList() {
      const _that = this;
      _that.agentLists.push({
        userName: '总交易',
      });
      _that.agentLists.push({
        userName: '直营',
      });
      this.$zx.user_api
        .agentList(this.pageNo, this.pageSize, this.agentParam)
        .then((data) => {
          _that.agentLists = _that.agentLists.concat(data);
          console.log('_that.agentLists-------->125', _that.agentLists);
        });
    },
    // 左边导航切换
    changeTab(index) {
      const _that = this;
      _that.agentSelect = index;
      let agentNo = uni.getStorageSync('agentNo');
      if (index == 0) {
        _that.agentParams.agentNo = '';
        _that.agentParams.transMonth = '';
        _that.params.agentNo = '';
      } else if (index == 1) {
        _that.agentParams.agentNo = agentNo;
        _that.agentParams.transMonth = '';
        _that.params.agentNo = agentNo;
      } else {
        _that.agentParams.agentNo = _that.agentLists[index].agentNo;
        _that.agentParams.transMonth = '';
        _that.params.agentNo = _that.agentLists[index].agentNo;
      }
      // 调用切换右边列表函数
      this.transStatByDate(-1, 0);
    },
    // 右边切换列表
    transStatByDate(index, num) {
      console.log('index----->151', index);
      const _that = this;
      _that.$zx.order_api.transStatByDate(this.agentParams).then((data) => {
        console.log('transStatByDate-------->154', data);
        if (num == 0) {
          _that.monthTransList = data;
          data.forEach(function (item, index, array) {
            _that.agentParams.transMonth =
              _that.monthTransList[index].transDate;
            // _that.transStatByDate(index, 1); //递归
          });
          _that.$nextTick(() => {
            _that.$refs.collapse.init();
          });
        } else {
          _that.$set(_that.monthTransList[index], 'list', data);
          console.log('monthTransList----->167', _that.monthTransList);
          _that.$nextTick(() => {
            _that.$refs.collapse.init();
          });
        }
      });
    },
    // 总交易金额
    transStat() {
      this.$zx.order_api.transStat(this.params).then((data) => {
        console.log('transStat-------->177', data);
        this.transAmount = data.transAmount;
      });
    },
    traversalTime(timestamp) {
      //timestamp(时间戳)是整数，否则要parseInt转换
      let time = new Date(timestamp);
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let mm = time.getMinutes();
      let s = time.getSeconds();
      return (
        y +
        '-' +
        this.addTimes(m) +
        '-' +
        this.addTimes(d) +
        ' ' +
        this.addTimes(h) +
        ':' +
        this.addTimes(mm) +
        ':' +
        this.addTimes(s)
      );
    },
    addTimes(m) {
      return m < 10 ? '0' + m : m;
    },
    // 右边下拉列表切换
    itemChange(index) {
      const _that = this;
      // monthTransList数组中的index索引，赋值给transMonth
      _that.agentParams.transMonth = _that.monthTransList[index].transDate;
      console.log('_that.monthTransList----->212', _that.monthTransList);

      // 防抖处理
      // _that.$u.debounce(() => {
      //   _that.transStatByDate(index, 1);
      // }, 1000);
      _that.transStatByDate(index, 1);
    },
  },
};
</script>

<style scoped lang="scss">
.trade {
  &__head {
    margin-left: 10rpx;
    margin-right: 10rpx;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 200rpx;
    background-image: url('/static/image/benefit/img_trade_query_bg.png');
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
  }

  &__money {
    font-size: 22px;
    margin-top: 20rpx;
    font-weight: bold;
  }

  &__tip {
    font-size: 11px;
    padding-left: 20rpx;
    padding-top: 20rpx;
    color: #999;
  }

  &__money-icon {
    display: inline-block;
    margin-right: 10rpx;
  }

  &__content {
    padding: 20rpx;
  }

  &__left-tab {
    display: flex;
    flex-direction: column !important;
    background-color: white;
    border-radius: 20rpx;
    margin-right: 20rpx;
    width: 200rpx;
    padding: 0rpx 32rpx;
  }

  &__tab-item {
    // height: 100rpx;
    line-height: 100rpx;
    flex-direction: row-reverse;

    &__text {
      // width: 100rpx;
      text-align: right;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
  }

  &__right-content {
    background-color: white;
    border-radius: 20rpx;
    padding: 0 20rpx;
    flex: 1;
  }
}
</style>
